建立input

新增一個ToDoForm.js元件，在這邊使用者可以填寫新的代辦事項，透過enter或是click送出資料。

import Reactfrom 'react'

function ToDoForm(){
    return(
        <form>
            <input type="text" placeholder="Enter your task"/>
            <button>Submit</button>
        </form>
    )
}

export default ToDoForm;

使用useState控制表單input

input所輸入的資料透過useState去監控

const [userInput,setUserInput]=useState("")

在input裡面也要建立一個參數去與useState做連動

<input value={userInput} type="text" placeholder="Enter your task"/>

監控input內容改變

製作一個handleChangefunction，當使用者在輸入內容時，state會隨時做更新。

const handleChange=(e)=>{
    setUserInput(e.currentTarget.value)
}

<input value={userInput} type="text" placeholder="Enter your task" onChange={handleChange}/>

做到這個步驟只是先將基本的input做好設定，明天就是最後一步驟，怎麼把input資料傳到清單之中。